<template>
	<view class="conetnt">
		<view class="text-center color-red">
			{{ errMsg }}
		</view>
		<view class="feedback">
			<view class="feedback-title">
				您好，请输入异常上报原因
			</view>
			<view class="feedback-content">
				<textarea v-model="content"></textarea>
			</view>
		</view>
		<view class="feedback">
			<view class="feedback-title">
				上传 <text selectable="text-small"> （选填，提供异常照片） </text>
			</view>
			<view class="feedback-img">
				<view class="feedback-img-item" @click="SelectImg(0)">
					<text class="dicon diconpaizhao-xianxing" v-if="!imgList[0]"></text>
					<image :src="imgList[0]" v-else></image>
				</view>

				<view class="feedback-img-item" @click="SelectImg(1)">
					<text class="dicon diconpaizhao-xianxing" v-if="!imgList[1]"></text>
					<image :src="imgList[1]" v-else></image>
				</view>

				<view class="feedback-img-item" @click="SelectImg(2)">
					<text class="dicon diconpaizhao-xianxing" v-if="!imgList[2]"></text>
					<image :src="imgList[2]" v-else></image>
				</view>

			</view>
		</view>
		<button class="my-submit-btn" type="primary" :disabled="disabled" :loading="disabled" @click="submit">提交</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	let _self ,errData ;
	export default {
		data() {
			return {
				content: '',
				filespath: '',
				device: {
					"macAddr": "",
					"ipAddr": "",
				},
				imgList: [],
				disabled:false,
				errMsg:''
			};
		},
		computed: mapState(['userInfo', 'checkData']),
		onLoad(parmars) {
			_self = this
			console.log(parmars);
			this.errMsg = parmars.err
			errData = JSON.parse(decodeURIComponent(parmars.data));
			errData.DETAILS = JSON.parse(decodeURIComponent(parmars.sub))
			// #ifdef APP-PLUS
			this.version = plus.runtime.version;
			let Tdevice = uni.getSystemInfoSync()
			this.device.vcode = plus.device.imei || ''
			this.device.version = plus.runtime.version
			this.device.brand = Tdevice.brand
			this.device.model = Tdevice.model
			this.device.osVersion = Tdevice.system
			this.device.appVersion = plus.runtime.version
			this.device.sysType = Tdevice.platform
			// #endif
		},
		
		methods: {
			SelectImg(type) {
				let that = this;
				_self.$utils.uploadImg(function(e){
					that.imgList.push(e);
				})
				
				// let that = this;
				// let baseUrl = getApp().globalData.BaseURL ;
				// let Token =  getApp().globalData.Token ;
				// let NUM = 3 - this.imgList.length
				// uni.chooseImage({
				// 	count: NUM,
				// 	sizeType: ["original"],
				// 	success: (res) => {
				// 		let path = res.tempFilePaths;
				// 		path.forEach(item => {
				// 			uni.uploadFile({
				// 				url: baseUrl + "/api/appCommon/Upload",
				// 				filePath: item,
				// 				name: 'files',
				// 				header: { Authorization:'BasicAuth '+Token },
				// 				formData: {
				// 					type: 'feedback'
				// 				},
				// 				success: (uploadFileRes) => {
				// 					console.log(uploadFileRes);
				// 					let data = JSON.parse(uploadFileRes.data);
				// 					if (data && data.IsSuccess == true) {
				// 						let url = data.Result[0];
				// 						that.imgList.push(url);
				// 					} else {
				// 						uni.showToast({
				// 							title: "上传失败：" + data.Message,
				// 							duration: 2000,
				// 						});
				// 					}
				// 				},
				// 			});
				// 		})
				// 	},
				// });
			},

			submit() {
				if(this.content=='') return this.$utils.tips('请输入异常上报原因')
				this.disabled = true
				let File = ''
				this.imgList.forEach(i => {
					if (File == '') {
						File = i
					} else {
						File = File+',' + i
					}
				})
				
				errData.DETAILS[0].REPORTREASON = this.content
				errData.DETAILS[0].REPORTPHOTO = File
				errData.DETAILS[0].RPSTATUS = 2
				// console.log(data);
				// http://116.63.133.63:9002
				let URL = '/api/APPCommon/ReportException';
				_self
					.axios({
						url: URL,
						data: errData,
					})
					.then((res) => {
						let {
							Message
						} = res;
						_self.disabled = false;
						_self.$utils.tips("上报提交成功" );
						setTimeout(function() {
							uni.navigateBack();
						}, 1500);
					})
					.catch((err) => {
						_self.disabled = false;
					});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}

	.conetnt {
		.feedback {
			background-color: #FFFFFF;
			padding: 40rpx;

			&-title {
				.text-small {
					font-size: 20rpx;
					color: #AAAAAA;
				}
			}

			&-title::before {
				content: '';
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				background-color: #176FFF;
				position: relative;
				top: 6rpx;
				margin-right: 20rpx;
			}

			&-content {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #EDEDED;
				padding: 20rpx;
			}

			&-img {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				&-item {
					background-color: #EDEDED;
					width: 150rpx;
					height: 150rpx;
					line-height: 150rpx;
					border-radius: 20rpx;
					text-align: center;

					.dicon {
						font-size: 60rpx;
						color: #AAAAAA;
					}

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}
			}
		}
	}

	.my-submit-btn {
		margin: 20rpx 40rpx;
	}
	.color-red{
		color: red;
		margin-top: 20rpx;
	}
</style>
